<template>
  <div class="darg-bar" data-tauri-drag-region>
  </div>
  <div class="clock" @dblclick="showTileWindow">
    <Clock />
  </div>
  <br>
  <div class="tile-desk" v-show="tileWindow">
    <hr>
    <TileDesktop />
  </div>
</template>


<script setup lang="ts">

import Clock from './components/Clock.vue';
import TileDesktop from './components/TileDesktop.vue';
import { appWindow } from '@tauri-apps/api/window';
import { register } from '@tauri-apps/api/globalShortcut';
import { onMounted, ref } from 'vue';

// 文件窗口展示标识
const tileWindow = ref(false)

onMounted(async () => {
  await register('Alt+Z', () => {
    console.log('按下了快捷键alt+z');
    maxScreen();
  });
})


async function maxScreen() {
  let max = await appWindow.isMaximized()
  if (max) {
    await appWindow.unmaximize();
  } else {
    await appWindow.maximize();
  }
}

function showTileWindow() {
  tileWindow.value = !tileWindow.value;
}


</script>


<style>
html {
  background: transparent;
}

body {
  background-color: rgba(255, 255, 255, 0.349);
  overflow: hidden;
}

.darg-bar {
  padding: 0.2rem;
  height: 0.2rem;
  margin-bottom: 0.5rem;
  transition: ease-in-out 0.5s;
  position: sticky;
}

.darg-bar:hover {
  text-align: center;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 0.5rem #fff
}

.clock {
  height: 25vh;
}

.tile-desk {
  padding-top: 1rem;
  padding-left: 1rem;
  height: 50vh;
  overflow: auto;
  scrollbar-width: thin;
}
</style
